<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺信息</el-breadcrumb-item>
      <el-breadcrumb-item>VIP列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入搜索条件"
            v-model="queryInfo.keywords"
            clearable
            size="mini"
            style="min-width:180px;"
            @clear="getVipList"
          >
            <el-button
              slot="append"
              size="mini"
              icon="el-icon-search"
              @click="getVipList"
              clearable
              @keyup.enter.native="getVipList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="formDialog('add')" size="mini">添加VIP</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table
        :data="vipList"
        stripe
        size="mini"
        highlight-current-row
        height="calc(100vh - 260px)"
        :show-overflow-tooltip="true"
      >
        <template slot="empty"><el-empty description="暂无数据"></el-empty></template>
        <el-table-column sortable type="index" label="序号"></el-table-column>
        <el-table-column sortable label="姓名" prop="nickname" min-width="80px"></el-table-column>
        <el-table-column sortable label="会员余额" prop="money" min-width="80px">
          <template #default="{row}">
            <el-tag size="mini" v-if="row.money >= 200" type="warning">{{ row.money || 0 }} 元</el-tag>
            <el-tag size="mini" v-else-if="row.money >= 100">{{ row.money || 0 }} 元</el-tag>
            <el-tag size="mini" v-else type="danger">{{ row.money || 0 }} 元</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable label="手机号" prop="phone" min-width="100px"></el-table-column>
        <el-table-column sortable label="微信" prop="vip_vx" min-width="100px"></el-table-column>
        <el-table-column
          sortable
          label="地址"
          prop="address"
          min-width="180px"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" min-width="140px">
          <template #default="{row}">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="formDialog('edit', row)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeVip(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        size="mini"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增VIP用户的对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialog"
      width="500px"
      @close="$refs.formRef.resetFields()"
      :close-on-click-modal="false"
    >
      <!-- 内容主体区域 -->
      <el-form :model="form" :rules="formRules" ref="formRef" label-width="80px" size="mini">
        <el-form-item label="姓名" prop="nickname">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="editFrom">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="会员金额" prop="money">
          <el-input v-model.number="form.money"></el-input>
        </el-form-item>
        <el-form-item label="微信" prop="vip_vx">
          <el-input v-model="form.vip_vx"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="meno">
          <el-input type="textarea" v-model="form.meno"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="savaVip">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { vip } from '@/api/vip.js'
export default {
  data() {
    // 自定义校验规则 验证手机号
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      vipList: [],
      // 获取用户列表的参数对象
      queryInfo: {
        keywords: '',
        page: 1,
        pagesize: 10
      },
      total: 0,
      dialogTitle: '新增VIP用户',
      editFrom: true,
      //   控制用户对话框的显示与隐藏
      dialog: false,
      //   添加用户的表单数据
      form: {
        nickname: '',
        phone: ''
      },
      //   添加表单的验证规则对象
      formRules: {
        nickname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符之间', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        money: [{ required: true, message: '请输入金额', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getVipList()
  },
  methods: {
    async getVipList() {
      console.log(this.queryInfo)
      const { data: res } = await vip.list(this.queryInfo)
      if (res.status !== 0) return this.$message.error(res.message)
      console.log(res)
      this.vipList = res.data
      this.total = res.total
    },
    // 对话框
    formDialog(type = 'add', info = {}) {
      console.log(info)
      this.dialogTitle = '新增VIP用户'
      this.editFrom = true
      if (type === 'edit') {
        this.dialogTitle = '编辑VIP用户'
        this.editFrom = false
      }
      this.form = info
      // 存储信息
      sessionStorage.setItem('vipInfo', JSON.stringify(this.form))
      this.dialog = true
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getVipList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getVipList()
    },
    // 保存
    async savaVip() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        console.log(this.form)
        // 添加 or 修改
        if (this.dialogTitle === '新增VIP用户') {
          const { data: res } = await vip.add(this.form)
          console.log(res)
          if (res.status !== 0) return this.$message.error(res.message)
          this.$message.success('新增VIP用户成功')
        }
        if (this.dialogTitle === '编辑VIP用户') {
          if (JSON.stringify(this.form) === sessionStorage.getItem('vipInfo')) return (this.dialog = false)
          const { data: res } = await vip.update(this.form)
          // console.log(res);
          if (res.status !== 0) return this.$message.error(res.message)
          this.$message.success('编辑VIP用户成功')
        }
        this.dialog = false
        this.getVipList()
      })
    },
    // 根据id删除对应的用户信息
    async removeVip(id) {
      // 弹框询问用户是否删除数据
      const confirmRsults = await this.$confirm('此操作将永久删除该VIP, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 确认删除 confirm；取消删除 cancel
      if (confirmRsults !== 'confirm') return this.$message.info('已取消删除')

      // console.log('确认删除')
      const { data: res } = await vip.delete(id)
      console.log(res)
      if (res.status !== 0) return this.$message.error('删除VIP失败')
      this.$message.success('删除VIP成功')
      this.getVipList()
    },
    errorHandler() {
      return true
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-dialog__body {
  padding-right: 50px;
}
</style>
